<script setup lang="ts">
import 'vue3-tree-org/lib/vue3-tree-org.css'
import { Vue3TreeOrg } from 'vue3-tree-org'
import {
  DArrowRight,
  Delete,
  Search,
} from '@element-plus/icons-vue'
import { treeOrgConfig } from './index'
import { queryTreeList } from '@/api/modules/sysDepartmental'
import type { DepartmentalInfo } from '@/types'
// ------------------use------------------
// #region
const [departmentalList, setDepartmentalList] = useState<
  Partial<DepartmentalInfo>[]
>([])
const { withLoading, vLoading } = useDefineLoading()
const { isAdmin } = storeToRefs(useUserStore())
// #endregion
// ------------------静态变量------------------
// #region
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const selectDepartmentalIndex = ref<number>(0)
const filterInputVal = ref<string>('')
const treeOrgRef = ref<InstanceType<typeof Vue3TreeOrg>>()
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
const departmentalComputed = computed(
  () =>
    departmentalList.value[selectDepartmentalIndex.value]
    ?? {},
)

// #endregion
// ------------------生命周期------------------
// #region
onMounted(() => {
  getDepartmentalList()
})
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
function filterNodeMethod(value: string, data: any) {
  console.log(123, value, data)
  if (!value)
    return true
  return (data.label as string).includes(value)
}
function filter() {
  if (!filterInputVal.value)
    return
  treeOrgRef.value?.filter(filterInputVal.value)
}
function reset() {
  filterInputVal.value = ''
  treeOrgRef.value?.filter(filterInputVal.value)
}
async function getDepartmentalList() {
  const { data: res } = await withLoading(queryTreeList)()
  setDepartmentalList(res)
}
// #endregion
</script>

<template>
  <div
    v-loading
    class="width-fill height-fill padding-sm energy-sector-architecture relative container"
  >
    <div
      class="align-center width-fill padding-sm tools box-border flex"
    >
      <el-input
        v-model.trim="filterInputVal"
        clearable
        filterable
        placeholder="请输入搜索内容"
        :style="{
          width: isAdmin ? '400px' : '240px',
        }"
        @keydown.enter="filter"
      >
        <template v-if="isAdmin" #prepend>
          <el-select
            v-model="selectDepartmentalIndex"
            placeholder="部门选择"
            class="free"
            style="width: 115px"
          >
            <el-option
              v-for="(item, i) in departmentalList"
              :key="item.id"
              :label="item.departName"
              :value="i"
            />
          </el-select>
        </template>
      </el-input>
      <el-button
        plain
        type="primary"
        :icon="Search"
        class="margin-lr-xs"
        @click="filter"
      >
        搜索
      </el-button>
      <el-button
        plain
        :icon="Delete"
        class="margin-lr-xs"
        @click="reset"
      >
        清空
      </el-button>
      <span
        class="margin-left-auto c-pointer fs-14"
        @click="$router.push('/department-management')"
      >
        部门管理
        <el-icon class="vertical-align-top">
          <DArrowRight />
        </el-icon>
      </span>
    </div>
    <Vue3TreeOrg
      ref="treeOrgRef"
      v-bind="(treeOrgConfig as any)"
      :data="departmentalComputed"
      :filter-node-method="filterNodeMethod"
      class="!padding-xl box-border"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
.tools {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9;
  span {
    color: var(--el-text-color-placeholder);
    transition: color 0.2s;
    &:hover {
      color: var(--el-color-primary);
    }
  }
}
.manage {
  position: absolute;
  inset: 0px;
  z-index: 99;
  background-color: var(--el-bg-color-overlay);
}

//-------------样式穿透-------------
</style>
